<template>
  <div>
    <el-form :model="form">
        {{form}}
        
        <el-form-item label="标题" label-width="120px" :rules="[{ required: true}]">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" label-width="120px">
          <template>
              <div class="avant" v-if="form.img">
                  <img  :src="$pre+form.img" alt="">
              </div>
              <div class="avant">
                  <h3>+</h3>
                  <input type="file" @change="changeImg">
                  <img v-if="imgUrl" :src="imgUrl" alt="">
              </div>
          </template>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="commit">{{$route.path == '/banner/add'? '添加':'修改'}}</el-button>
        </el-form-item>

      </el-form>
      
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {reqbanneradd,reqbanneredit,reqbannerinfo} from '../../../http/api';
import { errorAlert, successAlert } from '../../../utils/alert';
import path from 'path';
export default {
  computed: {
    ...mapGetters({
    })
  },
  data() {
    return {
        form:{
        title: "",
        img: null,
        status: 1
    },
    isshow:false,
    imgUrl:'',
    };
  },
  activated() {
    if(this.$route.path !== "/banner/add"){
      // console.log(this.$route);
      this.isshow = true;
      reqbannerinfo({ id:this.$route.params.id }).then((res) => {
            if (res.data.code === 200) {
                this.form = res.data.list
            }
        }).catch((err) => {
            console.log('请求失败-----err:' + err);
        })
    }
  },
  beforeRouteLeave(to,from,next){
    this.imgUrl = '';
    // console.log(to,from);
    if(from.path !== '/banner/add'){
        this.form = {
        title: "",
        img: null,
        status: 1
    };
    this.isshow=false;
    this.imgUrl='';
    };
    next()
    },
  
  methods: {
    ...mapActions({
    }),
    changeImg(e){
        let file = e.target.files[0];

        // 验证文件大小
        if(file.size > 2*1024*1024){
            errorAlert('上传文件不能超过2M');
            return
        }

        // 验证文件类型
        let extname = path.extname(file.name);
        console.log(extname);
        let imgExtnames = ['.jpeg','.jpg','.png','.gif'];

        if(!imgExtnames.includes(extname)){
            errorAlert('请上传正确的文件格式');
            return
        }
        this.imgUrl = URL.createObjectURL(file);

        this.form.img = file;
    },
    commit(){
     if(this.$route.path === '/banner/add'){
       reqbanneradd(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          this.form = {
              title: "",
              img: null,
              status: 1
          };
          this.isshow=false;
          this.imgUrl='';
          //返回菜单管理
          this.$router.push('/banner');
        }
      })
     }else{
       this.form.id = this.$route.params.id;
       reqbanneredit(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          //返回菜单管理
          this.$router.push('/banner');
        }
      })
     }
   }
  }
};
</script>
<style scoped lang="less">
@import url('../../../less/index.less');
.avant{
    float: left;
    width: 80px;
    height: 80px;
    border: 1px dashed @bg-deep;
    border-radius: @padding10;
    text-align: center;
    line-height: 45px;
    position: relative;
    overflow: hidden;
    margin-left: @padding10;
    input[type='file']{
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
    }
    img{
        width: 100%;
        height: 100%;
        opacity: 1;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
}
</style>